<!DOCTYPE html>
<html>
<head>
	<title></title>
	<style type="text/css">
	*{margin: 0;padding: 0;}
	body{
		width: 1350px;
		height: 600px;
		position: relative;
		transform-style: preserve-3d;
		perspective: 300px;
	}
		.box1{
			width: 100px;
			height: 100px;
			border: 1px solid red;
			left: 0;
			top: 0;
			right: 0;
			bottom: 0;
			margin: auto auto;
			transform-style: preserve-3d;
			animation:boxani 6s linear infinite;
			position: absolute;		
		}
		.box1 div{
			width: 100px;
			height: 100px;
			border: 1px solid black;
			background-color:rgba(60,60,60,0.3);
			text-align: center;
			line-height: 100px;
			position: absolute;
		}
		.box2{
			transform:rotateY(60deg) translateZ(200px);
		}
		.box3{
			transform:rotateY(120deg) translateZ(200px);
		}
		.box4{
			transform:rotateY(180deg) translateZ(200px);
		}
		.box5{
			transform:rotateY(240deg) translateZ(200px);
		}
		.box6{
			transform:rotateY(300deg) translateZ(200px);
		}
		.box7{
			transform:rotateY(360deg) translateZ(200px);
		}
		@keyframes boxani{
			0%{transform:rotateY(0);}
			100%{transform:rotateY(360deg);}
		}
	</style>
</head>
<body>
<div class="box1">
		<div class="box2">box1</div>
		<div class="box3">box2</div>
		<div class="box4">box3</div>
		<div class="box5">box4</div>
		<div class="box6">box5</div>
		<div class="box7">box6</div>
</div>
</body>
</html>